{extend name="admin@public/layout/popup_form"}

{block name="form"}

<style type="text/css">
    .layui-form-mid{padding:0!important;}
    .layui-form-mid code{color:#5FB878;}
    .layui-table{color: #333!important}
    .layui-form-switch{margin-top: 0px;}
</style>
<div class="layui-form-item">
    <table class="layui-table" style="margin: 0;" lay-skin="nob">
        <colgroup>
            <col width="10%">
            <col width="50%">
            <col width="40%">
        </colgroup>
        <tbody>
        {foreach $config_items as $k=>$v}
        <tr>
            <td style="text-align:right;
                {if in_array($v['type'],['textarea','array','image_single','image_multi','ueditor'])}vertical-align:top;{/if}
                {if in_array($v['type'],['textarea','image_single','image_multi'])}padding-top:18px;{/if}
                ">
                {$v.name}
            </td>
            <td>
                {switch ($v['type'])}
                {case input}
                <input type="text" name="row[{$v.key}]" class="layui-input" value="{:isset($config[$v['key']])?$config[$v['key']]:(isset($v['content'])?$v['content']:'')}" autocomplete="off" />
                {/case}
                {case textarea}
                <textarea name="row[{$v.key}]" class="layui-textarea">{:isset($config[$v['key']])?$config[$v['key']]:(isset($v['content'])?$v['content']:'')}</textarea>
                {/case}
                {case select_single}
                <select name="row[{$v['key']}]">
                    <option value="">请选择</option>
                    {if is_array($v['content'])}
                    {foreach $v['content'] as $content_k=>$content_v}
                    <option value="{$content_k}"
                            {php}if(($config[$v['key']] ? $config[$v['key']] : $v['default']) == $content_k){{/php}
                    selected="selected"
                    {php}}{/php}
                    >{$content_v}</option>
                    {/foreach}
                    {/if}
                </select>
                {/case}
                {case select_multi}
                <div class="select_multi"
                     id="{$v['key']}"
                     options='{:getSelectMultiJsConst($v["content"])}'
                     name="row[{$v['key']}]"
                     selected_data='{:json_encode(explode(",",$config[$v['key']] ? $config[$v['key']] : $v['default']))}'
                ></div>
                {/case}
                {case radio}
                {if is_array($v['content'])}
                <!-- 隐藏域设置开关未选中时需要传递的参数值 -->
                <input type="hidden" name="row[{$v['key']}]" value="{:key($v['content'])}" />
                <input type="checkbox" name="row[{$v['key']}]" lay-skin="switch"
                       lay-text="{:next($v['content'])}|{:prev($v['content'])}"
                       next-item="{:next($v['content'])}"
                       value="{:key($v['content'])}"
                       {php}if(($config[$v['key']] ? $config[$v['key']] : $v['default']) == key($v['content'])){{/php}
                checked="checked"
                {php}}{/php} />
                {/if}
                {/case}
                {case image_single}
                <div class="layui-upload">
                    <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$v['key']}]" id="input_{$v['key']}" value="{$config[$v['key']]}" /></div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm pull-left"
                                id="{$v['key']}"
                                upload="true"
                                accept="images"
                                single_multi="single"
                        ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                    </div>
                    <div class="pic-more">
                        <ul class="pic-more-upload-list" id="preview_{$v['key']}">
                            {if $config[$v['key']]}
                            <li class="item_img">
                                <div class="operate">
                                    <i class="upload_img_close layui-icon" file_url_data="{$config[$v['key']]}" node="{$v['key']}"></i>
                                </div>
                                <img src="{$config[$v['key']]}" class="img">
                            </li>
                            {/if}
                        </ul>
                    </div>
                </div>
                {/case}
                {case image_multi}
                <div class="layui-upload">
                    <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$v['key']}]" id="input_{$v['key']}" value="{$config[$v['key']]}" /></div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm pull-left"
                                id="{$v['key']}"
                                upload="true"
                                accept="images"
                                single_multi="multi"
                        ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                    </div>
                    <div class="pic-more">
                        <ul class="pic-more-upload-list" id="preview_{$v['key']}">
                            {if $config[$v['key']]}
                            {foreach :explode(",",$config[$v['key']]) as $key=>$vo}
                            <li class="item_img">
                                <div class="operate">
                                    <i class="upload_img_close layui-icon" file_url_data="{$vo}" node="{$v['key']}"></i>
                                </div>
                                <img src="{$vo}" class="img">
                            </li>
                            {/foreach}
                            {/if}
                        </ul>
                    </div>
                </div>
                {/case}
                {case video_single}
                <div class="layui-upload">
                    <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$v['key']}]" id="input_{$v['key']}" value="{$config[$v['key']]}" /></div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                id="{$v['key']}"
                                upload="true"
                                accept="video"
                                upload_dir=""
                                single_multi="single">
                            <i class="layui-icon">&#xe62f;</i>选择上传
                        </button>
                    </div>
                    <div class="pic-more">
                        <ul class="pic-more-upload-list" id="preview_{$v['key']}">
                            {if $config[$v['key']]}
                            <li class="item_video">
                                <video src="{$config[$v['key']]}" controls="controls" width="200px" height="200px"></video>
                                <button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="{$config[$v['key']]}" node="{$v['key']}"><i class="layui-icon">&#xe640;</i></button>
                            </li>
                            {/if}
                        </ul>
                    </div>
                </div>
                {/case}
                {case video_multi}
                <div class="layui-upload">
                    <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$v['key']}]" id="input_{$v['key']}" value="{$config[$v['key']]}" /></div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                id="{$v['key']}"
                                upload="true"
                                accept="video"
                                upload_dir=""
                                single_multi="multi">
                            <i class="layui-icon">&#xe62f;</i>选择上传
                        </button>
                    </div>
                    <div class="pic-more">
                        <ul class="pic-more-upload-list" id="preview_{$v['key']}">
                            {if $config[$v['key']]}
                            {foreach :explode(",",$config[$v['key']]) as $key=>$vo}
                            <li class="item_video">
                                <video src="{$vo}" controls="controls" width="200px" height="200px"></video>
                                <button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="{$vo}" node="{$v['key']}"><i class="layui-icon">&#xe640;</i></button>
                            </li>
                            {/foreach}
                            {/if}
                        </ul>
                    </div>
                </div>
                {/case}
                {case file_single}
                <div class="layui-upload">
                    <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$v['key']}]" id="input_{$v['key']}" value="{$config[$v['key']]}" /></div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                id="{$v['key']}"
                                upload="true"
                                accept="file"
                                single_multi="single"
                        ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                    </div>
                </div>
                {/case}
                {case file_multi}
                <div class="layui-upload">
                    <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$v['key']}]" id="input_{$v['key']}" value="{$config[$v['key']]}" /></div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                id="{$v['key']}"
                                upload="true"
                                accept="file"
                                single_multi="multi"
                        ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                    </div>
                </div>
                {/case}
                {case ueditor}
                <script editor="true" type="ueditor" id="{$v['key']}" name="row[{$v['key']}]" type="text/plain">{$config[$v['key']]|raw}</script>
                {/case}
                {case array}
                <table class="layui-table tableDnd" style="margin: 0;" lay-skin="line">
                    <colgroup>
                        <col width="25%">
                        <col width="70%">
                        <col>
                    </colgroup>
                    <thead>
                    <tr class='nodrop nodrag'>
                        <th>键名</th>
                        <th>键值</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {if is_array($config[$v['key']])}
                    {foreach $config[$v['key']] as $vk=>$vv}
                    <tr>
                        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$v.key}][key][]" value="{$vk}" /></td>
                        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$v.key}][value][]" value="{$vv}" /></td>
                        <td style="padding: 4px 15px;">
                            <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete del_array_item" layer-tips="删除" title="删除"></a>
                        </td>
                    </tr>
                    {/foreach}
                    {else/}
                    {if isset($v['content']) && is_array($v['content'])}
                    {foreach $v['content'] as $vk=>$vv}
                    <tr>
                        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$v.key}][key][]" value="{$vk}" /></td>
                        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$v.key}][value][]" value="{$vv}" /></td>
                        <td style="padding: 4px 15px;">
                            <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete del_array_item" layer-tips="删除" title="删除"></a>
                        </td>
                    </tr>
                    {/foreach}
                    {/if}
                    {/if}
                    <tr class='nodrop nodrag'>
                        <td colspan="3" style="padding: 4px 15px;">
                            <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-add-1 add_array_item" config_key="{$v.key}" title="追加">追加</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                {/case}
                {/switch}
            </td>
            <td style="{if in_array($v['type'],['textarea','array','image_single','image_multi','ueditor'])}vertical-align:top;{/if}">
                <div class="layui-form-mid layui-word-aux">
                    {$v.tip}
                    <br />
                    调用方式<code>Config::get('addons.{$addon_name}.{$v.key}')</code>
                </div>
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['layTp'],function() {
        const
            layTp = layui.layTp
            , $ = layui.jquery
        ;

        $(document).on('click', '.add_array_item', function () {
            let click_obj = $(this);
            let config_key = click_obj.attr('config_key');
            layui.laytpl($('#array_item_html').html()).render({
                config_key: config_key
            }, function (string) {
                click_obj.parent().parent().before(string);
            });
        });

        $(document).on('click', '.del_array_item', function () {
            let click_obj = $(this);
            click_obj.parent().parent().remove();
        });
    });
</script>
{/block}

{block name="js_template"}
<script id="array_item_html" type="text/html">
    <tr>
        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{{ d.config_key }}][key][]" /></td>
        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{{ d.config_key }}][value][]" /></td>
        <td style="padding: 4px 15px;">
            <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete del_array_item" layer-tips="删除" title="删除"></a>
        </td>
    </tr>
</script>
{/block}